el |
您所在的位置：网站首页 › vue a-table单元格聚焦 › el |
el
|
el-table点击单元格自动聚焦可编辑，且失去焦点即修改成功的实现方法
原创
wx5864b4ab50c8a 2021-11-18 10:00:29 博主文章分类：elementUI ©著作权 文章标签 click事件 前端工具 自定义指令 数组 烂笔头 文章分类 代码人生 ©著作权归作者所有：来自51CTO博客作者wx5864b4ab50c8a的原创作品，请联系作者获取转载授权，否则将追究法律责任 前言最近做的一个表格，有改某个单元格的需求，经过研究完美实现此功能，以下简要介绍下实现过程： 所用前端工具element-ui官方文档vue官方文档 效果图 不拖泥带水，先看代码，想知道为什么要这样写的看下面讲解部分 {{scope.row.name}} export default { data () { return { dataList: [], loadingFlag: true } }, components: { PageTitle }, directives: { focus: { inserted: function (el) { el.querySelector('input').focus() } } }, created () { this.getList() }, methods: { getList () { this.$http.get('/list').then(res => { if (res.status === 200) { this.loadingFlag = false this.dataList = res.data.map(item => { return {...item, isSelected: false} }) console.log(this.dataList) } }) }, selectChange (e) { console.log(e) }, focusEvent (row) { row.oldName = row.name }, blurEvent (row) { row.isSelected = !row.isSelected if (row.name !== row.oldName) { // 。。。此处代码省略（调用修改名称接口） this.$message({ message: '修改成功', type: 'success', duration: 1000 }) } }, cellClick (row) { row.isSelected = !row.isSelected } } } 内容讲解 methods中getList方法在拿到后台数据后给数组对象每一项中添加了同一个属性isSelected,即：this.dataList = res.data.map(item => { return {...item, isSelected: false} }) 有了isSelected属性后我们可以控制每一项名称的和标签的显示隐藏，从而来实现点击单元格即自动聚焦修改名称 {{scope.row.name}} focusEvent方法是为了记录用户聚焦该行前，该行的name值：focusEvent (row) { row.oldName = row.name }, 失去焦点时，比较oldName和name是否相同blurEvent (row) { // 目的是为了让标签隐藏 row.isSelected = !row.isSelected if (row.name !== row.oldName) { // 。。。此处代码省略（调用修改名称接口） this.$message({ message: '修改成功', type: 'success', duration: 1000 }) } }, 接下来要讲为什么要用自定义指令v-focus，当给标签添加autofocus发现无效，然后看到网上提供的思路遂使用vue框架提供的directives：directives: { focus: { inserted: function (el) { el.querySelector('input').focus() } } }, 目的就是为了在点击 标签的同时，显示标签并使其聚焦 这里说明一下cellClick事件之所以加在 标签上是防止点击时也触发cellClick事件,如果加在它们的父级上会出现我说的这种情况。 总结 之所以要写这篇文章，是因为当想实现这个功能的时候发现网上没有一个讲的好的例子，所以花点时间记录一下，好记性不如烂笔头，也希望可以帮助到需要的人，觉得不错的点个赞再走吧！ 赞 收藏 评论 分享 举报上一篇：while中continue break return各自的作用 下一篇：HTML5新特性——自定义滑动条（input[type="range"]） |
【本文地址】
今日新闻 |
推荐新闻 |